<template>
    <div class="w-full h-100vh flex-center">
        <div
            class="w-400px box-border p-20px flex flex-col items-center shadow-2xl"
        >
            <div class="font-size-24px">重置密码</div>
            <div class="w-full my-20px flex flex-col gap-10px">
                <n-input
                    v-model:value="resetForm.account"
                    placeholder="账号"
                    size="large"
                    maxlength="9"
                >
                </n-input>
                <n-input
                    v-model:value="resetForm.password"
                    placeholder="新密码"
                    type="password"
                    size="large"
                    maxlength="15"
                >
                </n-input>
                <n-input
                    v-model:value="resetForm.confirmPassword"
                    placeholder="确认密码"
                    type="password"
                    size="large"
                    maxlength="15"
                >
                </n-input>
                <div class="w-full flex gap-10px">
                    <n-input
                        v-model:value="resetForm.vcode"
                        placeholder="验证码"
                        size="large"
                    >
                    </n-input>
                    <n-button
                        class="w-100px"
                        size="large"
                        :focusable="false"
                        @click="vcodeVisiable = true"
                    >
                        验证
                    </n-button>
                </div>
                <div class="w-full flex gap-10px">
                    <n-button
                        size="large"
                        class="flex-1"
                        :focusable="false"
                        @click="router.push({ name: 'login' })"
                        >返回</n-button
                    >
                    <n-button
                        type="primary"
                        size="large"
                        class="flex-1"
                        :focusable="false"
                        @click="handleConfirmReset"
                        >重置</n-button
                    >
                </div>
            </div>
        </div>
    </div>
    <Vcode :show="vcodeVisiable" @success="successVerify" />
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import Vcode from "vue3-puzzle-vcode";

import { resetPassword } from "@/service/api/modules/user";

const router = useRouter();

// 展示验证窗口
const vcodeVisiable = ref(false);
// 验证窗口是否验证成功
const vcodeVerify = ref(false);

const resetForm = reactive<{ [key: string]: string }>({
    account: "",
    vcode: "", // 验证码, 模拟根据api获取验证码校验角色身份的情况
    password: "",
    confirmPassword: "",
});

const successVerify = (code: string) => {
    vcodeVerify.value = true;
    vcodeVisiable.value = false;
};

const handleConfirmReset = async () => {
    for (const key in resetForm) {
        if (resetForm[key] === "") {
            window.NMessage.warning("请完成表单");
            return;
        }
    }
    if (resetForm.account.length !== 9 && resetForm.password.length < 8) {
        window.NMessage.warning("账号或密码格式错误");
        return;
    }
    if (resetForm.password !== resetForm.confirmPassword) {
        window.NMessage.warning("两次密码不一致");
        return;
    }
    if (resetForm.vcode !== "123456") {
        window.NMessage.warning("重置验证码错误");
        return;
    }
    if (!vcodeVerify.value) {
        window.NMessage.warning("请完成人机验证");
        return;
    }
    try {
        await resetPassword(
            resetForm.account,
            resetForm.password,
            resetForm.vcode
        );
        window.NDialog.success({
            title: "消息",
            content: "重置成功，请返回登录",
            closable: false,
            maskClosable: false,
            positiveText: "返回",
            onPositiveClick: () => {
                router.push({ name: "login" });
            },
        });
    } catch (err) {
        window.NMessage.error((err as Error).message);
    }
};
</script>

<style scoped>
* {
    user-select: none;
}
</style>
